<template>
  <div class="container">
    <div class="cont-right">
      <div class="cont-right-top">
        <span :class="type == 1 ? 'active' : ''" @click="getData(1)"
          >人物档案</span
        >
        <span :class="type == 2 ? 'active' : ''" @click="getData(2)"
          >机构档案</span
        >
        <el-button
          @click="linkCreateManage"
          class="create-btn"
          type="primary"
          icon="el-icon-plus"
          >创建档案</el-button
        >
      </div>
      <div class="cont-head">
        <div class="search-box">
          <input
            v-model="search"
            class="search"
            type="text"
            placeholder="请输入人名或特征词"
          />
          <i class="el-icon-search" @click="searchData"></i>
        </div>
        <div class="sort">
          <!-- <div class="filter-time" @click="setCreateSort">
            <span class="txt">创建时间</span>
            <div class="icon-box">
              <i
                :class="create_sort == 1 ? 'active' : ''"
                class="icon el-icon-caret-top"
              ></i>
              <i
                :class="create_sort == 2 ? 'active' : ''"
                class="icon el-icon-caret-bottom"
              ></i>
            </div>
          </div> -->
          <div class="filter-time" @click="setSort">
            <span class="txt">更新时间</span>
            <div class="icon-box">
              <i
                :class="update_sort == 1 ? 'active' : ''"
                class="icon el-icon-caret-top"
              ></i>
              <i
                :class="update_sort == 2 ? 'active' : ''"
                class="icon el-icon-caret-bottom"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div
        class="info-box"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <info-item
          :dataList="dataList"
          :type="type"
          :isDel="true"
          @handleLinkId="handleLinkId"
          @handleRemove="handleRemove"
        ></info-item>
      </div>
      <no-data :length="dataList.length" :loading="loading"></no-data>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :hide-on-single-page="paginationShow"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { GetPersonRecord, DeleteRecode } from "@/api/personal";
import {
  GetOrganizationRecord,
  DeleteOrganizationRecord,
} from "@/api/organization";
import { tipErr, tipSuc, tipWarn } from "@/utils/index";
export default {
  data() {
    return {
      loading: true,
      type: 1,
      search: "",
      update_sort: 0, //更新时间排序
      create_sort: 0, //创建时间排序
      dataList: [],
      pageSize: 10,
      pageNum: 0,
      total: 0,
    };
  },
  computed: {
    paginationShow() {
      return this.total > 10 ? false : true;
    },
  },
  async mounted() {
    this._GetPersonRecord();
  },
  methods: {
    linkCreateManage() {
      this.$router.push({
        name: "createmanagearchives",
      });
    },
    setCreateSort() {
      if (this.create_sort != 1) {
        this.create_sort = 1;
        this.dataList.sort((a, b) => {
          return a.createTime - b.createTime;
        });
      } else if (this.create_sort != 2 && this.create_sort != 0) {
        this.create_sort = 2;
        this.dataList.sort((a, b) => {
          return b.createTime - a.createTime;
        });
      }
    },
    setSort() {
      if (this.update_sort != 1) {
        this.update_sort = 1;
        this.dataList.sort((a, b) => {
          return a.updateTime - b.updateTime;
        });
      } else if (this.update_sort != 2 && this.update_sort != 0) {
        this.update_sort = 2;
        this.dataList.sort((a, b) => {
          return b.updateTime - a.updateTime;
        });
      }
    },
    getData(index) {
      this.type = index;
      if (index == 1) {
        this._GetPersonRecord(0);
      } else {
        this._GetOrganizationRecord(0);
      }
    },
    async _GetPersonRecord(index, jsons) {
      let params = {
        create_sort: this.create_sort,
        recordScope: 1,
        row: 20,
        start: index ? index * 20 : 0,
        type: "PERSON",
      };
      if (this.search != "") {
        params = Object.assign(params, { searchContent: this.search });
      }
      if (jsons) {
        params = Object.assign(params, jsons);
      }
      let { data, code, msg, total } = await GetPersonRecord(params);
      this.loading = false;
      if (code == 1) {
        this.total = total;
        this.dataList = [...data.entityBasicInfoList];
        this.pageNum = index ? index + 1 : this.pageNum + 1;
      } else {
        tipErr(msg);
      }
    },
    async _GetOrganizationRecord(index, jsons) {
      let params = {
        create_sort: this.create_sort,
        recordScope: 1,
        row: 20,
        start: index ? index * 20 : 0,
        type: "ORGANIZATION",
      };
      if (this.search != "") {
        params = Object.assign(params, { searchContent: this.search });
      }
      if (jsons) {
        params = Object.assign(params, jsons);
      }
      let { data, code, msg, total } = await GetOrganizationRecord(params);
      this.loading = false;
      if (code == 1) {
        this.total = total;
        this.dataList = [...data.entityBasicInfoList];
        this.pageNum = index ? index + 1 : this.pageNum + 1;
      } else {
        tipErr(msg);
      }
    },
    async handleRemove(item) {
      if (item.loading) return;
      this.$set(item, "loading", true);
      var { data, code, msg } = await DeleteRecode({
        entityId: item.entityId,
      });

      if (code == 1) {
        tipSuc("删除成功");
        this.dataList = this.dataList.filter((items) => {
          return item.entityId != items.entityId;
        });
      } else {
        tipErr("删除失败");
      }
    },
    handleChange(index) {
      this.loading = true;
      if (this.type == 1) {
        this._GetPersonRecord(index - 1);
      } else {
        this._GetOrganizationRecord(index - 1);
      }
    },

    searchData() {
      if (!this.search) {
        tipWarn("请输入搜索内容！");
        return;
      }
      this.pageNum = 0;
      if (this.type == 1) {
        this._GetPersonRecord(this.pageNum, {
          searchContent: this.search,
        });
      } else {
        this._GetOrganizationRecord(this.pageNum, {
          searchContent: this.search,
        });
      }
    },
    handleLinkId(item) {
      let name;
      if (this.type == 1) {
        name = "personalDetail";
      } else {
        name = "organizationDetail";
      }
      this.$router.push({
        name: name,
        query: {
          entityId: item.entityId,
          name: item.entityName,
          abstractType: item.abstractType,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped src="@/assets/css/child.scss"></style>
<style lang="scss" scoped>
.cont-right {
  width: 100%;
  &-top {
    position: relative;
    padding-bottom: 25px;
    line-height: 20px;
    span {
      font-size: 16px;
      color: #b8becc;
      margin-right: 38px;
      cursor: pointer;
      &.active {
        font-size: 18px;
        color: #eee;
      }
    }
    .create-btn {
      width: 100px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      padding: 0;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
.cont-head {
  .sort {
    display: flex;
  }
  .filter-time {
    margin-left: 30px;
  }
}
.info-box {
  min-height: 300px;
}
</style>
